<!DOCTYPE HTML>
<html>
 <head>
  <title>房间服务</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <link href="__PUBLIC__/assets/css/dpl-min.css" rel="stylesheet" type="text/css" />
   <link href="__PUBLIC__/assets/css/bui-min.css" rel="stylesheet" type="text/css" />
   <link href="__PUBLIC__/assets/css/main.css" rel="stylesheet" type="text/css" />
   <style>
    .inner-grid{
      padding:10px 20px;
    }
    table {
				margin: 0px auto;
				width: 500px;
				border-collapse: collapse;
			}
			table tr th {
				border: 1px solid #e7e7e7;
				height: 25px;
			}
			table tr td {
				border: 1px solid #e7e7e7;
				height: 25px;
			}
			.title {
				text-align: center;
				font-weight: bolder;
			}
			tr:nth-child(odd){
				background-color: #EEE;
			}
			table tr:not(#a):hover {
				background-color: #dafdf3;
			}
			table #a {
				filter: progid: DXImageTransform.Microsoft.Gradient(startColorStr='#A9A9A9', endColorStr='#FFFFFF', gradientType='0');
				background: -moz-linear-gradient(top, #A9A9A9, #FFFFFF);
				background: -o-linear-gradient(top, #A9A9A9, #FFFFFF);
				background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#A9A9A9), to(#FFFFFF));
			}
  </style>
 </head>
 <body>
     <div class="demo-content" style="overflow:auto;height:550px">
    <div class="row">
      <div class="span22">
        <div id="grid" style="margin-top:24px;">
          
        </div>
      </div>
    </div>
    <button id="btnSearch" style="margin-top:24px" type="button" onclick="addrow()" class="button button-primary">添加</button>
    <button id="btnSearch" style="margin-top:24px" type="button" onclick="subRow()" class="button button-primary">提交</button>
    <div class="row">
      <div class="span22" style="margin-top:12px">
        <form id="serve_form" >
        <table id="mytable" align="left">
			<tr id="a">
				<td>唯一标识</td>
				<td>服务名称</td>
        <td>服务内容</td>
        <td>操作</td>
			</tr>
		</table>
        </form>
      </div>
    </div>
    <div id="content" class="hide">
      <form class="form-horizontal">
      <div class="row">
        <div class="control-group span8">
            <label class="control-label">新品：</label>
            <div class="controls">
              <select name="is_new" class="input-normal"> 
                <option value="">请选择</option>
                <option value="0">false</option>
                <option value="1">true</option>
              </select>
            </div>
          </div>
          <div class="control-group span8">
            <label class="control-label">热销：</label>
            <div class="controls">
              <select name="is_hot" class="input-normal"> 
                <option value="">请选择</option>
                <option value="0">false</option>
                <option value="1">true</option>
              </select>
            </div>
          </div>
      </div>
      <div class="row">
        <div class="control-group span8">
            <label class="control-label">特价：</label>
            <div class="controls">
              <select name="is_sale" class="input-normal"> 
                <option value="">请选择</option>
                <option value="0">false</option>
                <option value="1">true</option>
              </select>
            </div>
          </div>
          <div class="control-group span8">
            <label class="control-label">首页推荐：</label>
            <div class="controls">
              <select name="is_index" class="input-normal"> 
                <option value="">请选择</option>
                <option value="0">false</option>
                <option value="1">true</option>
              </select>
            </div>
          </div>
      </div>
      </form>
    </div>
  <script src="http://g.tbcdn.cn/fi/bui/jquery-1.8.1.min.js"></script>
  <script src="http://g.alicdn.com/bui/seajs/2.3.0/sea.js"></script>
  <script src="http://g.alicdn.com/bui/bui/1.1.21/config.js"></script>
 
<!-- script start --> 
    <script type="text/javascript">
        BUI.use(['bui/grid','bui/data'],function(Grid,Data){
            var Grid = Grid,
          Store = Data.Store,
          enumObj = {"0" : "否","1" : "是"},
          columns = [{
              title : '编号',
              dataIndex :'room_id',
              width:100,
            },{
              title : '房间名称',
              dataIndex :'title',
              width:200,
            },{
              title : '新品',
              dataIndex : 'is_new',
              width:100,
              renderer:Grid.Format.enumRenderer(enumObj)
          },{
              title : '热销',
              dataIndex : 'is_hot',
              width:100,
              renderer:Grid.Format.enumRenderer(enumObj)
          },{
              title : '特价',
              dataIndex : 'is_sale',
              width:100,
              renderer:Grid.Format.enumRenderer(enumObj)
          },{
              title : '首页推荐',
              dataIndex : 'is_index',
              width:100,
              renderer:Grid.Format.enumRenderer(enumObj)
          },{title : '操作',renderer : function(){
              return '<span class="grid-command btn-edit">编辑</span>'
            }}];
          // 实例化 Grid.Plugins.Cascade 插件
      var cascade = new Grid.Plugins.Cascade({
  			renderer : function(record){
  				return '<div class="inner-grid"></div>';	//生成简单表格的容器
  			}
  		}),
  		//简单表格的配置信息
  		simpleGridConfig = {
  			autoRender:true,                 //自动生成
  			columns:[{
              title : '唯一标识',
              dataIndex :'serve_id',
            },{
              title : '房间编号',
              dataIndex :'room_id',
            },{
              title : '服务名称',
              dataIndex :'title',
            },{
              title : '服务内容',
              dataIndex :'content',

            },{title : '操作',renderer : function(value,obj){
              //alert(obj.serve_id);
              return '<span class="grid-command" onclick="getid('+obj.serve_id+','+obj.room_id+')">添加、删除服务</span>'
            }}],
      };
  	 var editing = new Grid.Plugins.DialogEditing({
            contentId : 'content', //设置隐藏的Dialog内容
            triggerCls : 'btn-edit', //触发显示Dialog的样式
            editor: {
              title: '编辑'
            },
            autoSave : true //自动添加和更新
          });
      var store = new Store({
          url : "{:U('Hotel/room_serve_load')}",
          autoLoad:true,
          pageSize:5,
          proxy : {
              method : 'POST', //更改为POST
              save : "{:U('Hotel/room_serve_handle')}" //会附加一个saveType 的参数，add,remove,update
            }
        }),
        grid = new Grid.Grid({
          render:'#grid',
          columns : columns,
          store: store,
  	      plugins: [editing,cascade],// Grid.Plugins.Cascade 插件
         bbar:{
           pagingBar:true
         }
        });

      grid.render();
      store.on('saved',function (ev) {
          var type = ev.type, //保存类型，add,remove,update
            saveData = ev.saveData, //保存的数据
            data = ev.data; //返回的数据
 
          //TO DO
          if(type == 'add'){ //新增记录时后台返回id
            saveData.cat_id = data.id;
            grid.updateItem(saveData);
            //store.update()
            //BUI.Message.Alert('添加成功！');
          }else if(type == 'update'){
            //BUI.Message.Alert('更新成功！');
          }else{
            //BUI.Message.Alert('删除成功！');
          }
        });
        //保存或者读取失败
        store.on('exception',function (ev) {
          BUI.Message.Alert(ev.error);
        });
 
  	  cascade.on('expand',function(ev){
  		var data = ev.record,
  		  row = ev.row,
  		  sgrid = $(row).data('sub-grid');
  		if(!sgrid){
  		  var container = $(row).find('.inner-grid'),
  			  gridConfig = BUI.cloneObject(simpleGridConfig);
  		  gridConfig.render = container;
 
  		  sgrid = new Grid.SimpleGrid(gridConfig);
  		  sgrid.showData(data.records);
  		  $(row).data('sub-grid',sgrid);
  		}  
  	  });
 
  	  cascade.on('removed',function(ev){
  		var data = ev.record,
  		  row = ev.row,
  		  sgrid = $(row).data('sub-grid');
  		if(sgrid){
  		  sgrid.destroy();
  		}
  	  });
 
  	  $('#btnRemove').on('click',function(){
    		store.setResult([]); //清除记录
    		store.setResult(data); //重新添加纪录
  	  });
  	  $('#btnDel').on('click',function(){
    		var record = store.getResult()[0];
    		if(record){
    		  store.remove(record);
    		}
  	  });
  	  $('#btnExpand').on('click',function(){
  		  cascade.expandAll();
  	  });
  	  $('#btnCollapse').on('click',function(){
  		  cascade.collapseAll();
  	  });
      });
      function getid(serve_id,room_id){
        localStorage.setItem("room_id",room_id);
        var str='';
        $.post("{:U('Hotel/serve_item_load')}",{room_id:room_id},function(result){
          eval("value="+result);
          $('#mytable').html('<tr id="a"><td>唯一标识</td><td>服务名称</td><td>服务内容</td><td>编辑</td></tr>');
          for(var i=0;i<value.length;i++){
            str+=	'<tr>'+
				'<td>'+
					'<input name="serve_id[]" readonly="true" type="text" class="input-normal control-text" value="'+value[i].serve_id+'">'+
          '<input name="room_id[]" type="hidden" value="'+value[i].room_id+'">'+
			'</td>'+
				'<td>'+
				'<input name="title[]" type="text" class="input-normal control-text" value="'+value[i].title+'">'+
				'</td>'+
        '<td>'+
					'<input name="content[]" type="text" class="input-normal control-text" value="'+value[i].content+'">'+
				'</td>'+
        '<td>'+
          '<input type="button" class="input-normal" value="删除" onclick="delRow(this,'+value[i].serve_id+','+value[i].room_id+')">'+
        '</td>'+
			'</tr>';
          }
          $('#mytable').append(str);
        })
        }
        function addrow(){
          var str='<tr>'+
				'<td>'+
					'<input name="serve_id[]" readonly="true" type="text" class="input-normal control-text">'+
          '<input name="room_id[]" type="hidden" value="'+localStorage.getItem("room_id")+'">'+
			'</td>'+
				'<td>'+
				'<input name="title[]" type="text" class="input-normal control-text">'+
				'</td>'+
        '<td>'+
					'<input name="content[]" type="text" class="input-normal control-text">'+
				'</td>'+
        '<td>'+
          '<input type="button" class="input-normal" onclick="center(this)" value="删除">'+
        '</td>'+
			'</tr>';
      $('#mytable').append(str);
        }
        function center(k){
          $(k).parents("tr").remove();
        }
        function delRow(k,serve_id,room_id){
          $.post("{:U('Hotel/serve_del_handle')}",{serve_id:serve_id,room_id:room_id},function(result){
            eval("value="+result);
            if(value.code=="0000"){
              $(k).parents("tr").remove();
            }
            alert(value.message);
          })
        }
        function subRow(){
          var data=$("#serve_form").serialize();
          $.post("{:U('Hotel/serve_add_handle')}",data,function(result){
            console.log(result);
          });
        }
    </script>
<!-- script end -->
</div>
 </body>
 </html>